<template>
  <div id="member">
      <header>
        <span>普通会员</span>
        <span>
          <i class="iconfont icon-shezhi"></i>
        </span>
      </header> 
      <SamClub></SamClub>
      <MemberRights></MemberRights>
      <div @click="toLogin" class="member-jump">
        {{ status ? `欢迎${status}` : "点击登录您的会员账号" }}
      </div>
      <MemberHobby style="margin-left: 1rem;width: 33.5rem;"></MemberHobby>
      <button v-show="!status" @click="toLogin" class="member-button">免费登录注册</button>
      <div style="height: 10rem;"></div>
      <SamFooter></SamFooter>
  </div>
</template>
<script>
import SamClub from '@/components/SamClub/SamClub.vue';
import MemberRights from '@/components/MemberRights/MemberRights'
import MemberHobby from '@/components/MemberCard/MemberHobby/MemberHobby.vue';
import SamFooter from '@/components/Footer/SamFooter.vue';
export default {
  name: 'SamMember',
  components: {
    SamClub,
    MemberRights,
    MemberHobby,
    SamFooter
  },
  data() {
    return {
      status:''
    }
  },
  mounted(){
    const user = localStorage.getItem('status')
    if(user){
      this.status = user
    }
  },
  methods:{
    toLogin(){
      this.$router.push('/login')
    }
  }
};
</script>
<style lang='less' scoped>
  #member{
    position: relative;
    background-color: rgba(239, 237, 237, 0.721);
    header{
      width:37.5rem;
      line-height: 5rem;
      position: fixed;
      background-color: white;
      z-index: 9999;
      span{
        &:first-child{
          margin-left: 5rem;
          font-weight: bold;
          font-size: 2.5rem;
        }
        &:last-child{
          display: inline-block;
          width: 2.2rem;
          line-height: 2.2rem;
          border-radius: 50%;
          border: 0.1rem solid gainsboro;
          margin-left: 5rem;
          text-align: center;
          background-color: rgb(235, 230, 230);
          .iconfont{
            font-size: 2rem;
          }
        }
      }
  }
  .member-jump{
    width: 35.5rem;
    line-height: 4rem;
    background-color: white;
    margin: 1rem;
    border-radius: 0.2rem;
    text-align: center;
    i{
      margin-left: 10rem;
    }
  }
  .member-button{
    display: inline-block;
    height: 4rem;
    width: 34.5rem;
    background-color: rgb(52, 172, 219);
    margin-left: 1.5rem;
    position: fixed;
    bottom: 6rem;
  }
}
</style>